<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    1. 图标很重要，一图胜千言
    2. direction="rtl"，只是让图标的顺序发生了变化，但是图标并不会翻转，带有方向性的图标是需要翻转的
    3. transform: scaleX(-1)也能够翻转 + dir="rtl"
    4. 有一些图标是右手拿的，这个时候是不需要翻转的，右撇子
    5. 还有一些比如 播放器的图标也是不需要翻转,
    5.1 按钮带上icon，icon的位置是需要更换的
    5.2 在一些输入框输入应该保持左对齐，电子邮件和号码，刚开始占位符向右边对齐，但是一旦聚焦，最好是向左对齐

    6. 一些下拉和输入框，需要右对齐；如果是邮件或者是电话号码数字，要左对齐。不同的图标的含义，在不同国家，会不同，红点在中国文化是未读，在日本文化中确是已读 ==> 选择图标的时候要和语言关联起来
    7. 为图标添加辅助性的文字描述，很重要 数字不用镜像，带有图标要镜像
    8. 注意号码和邮箱,国际化的时候,格式要确认,电话号码和邮箱一般要进行脱敏
    9. html中的dir和css的direciton可以进行大部分的翻转;不行的话用transform: scale(-1); 
   -->
</body>
</html>